(function () {
	function template() {
		var template = document.createElement("template"),
			root = document.createElement("div"),
			
			head = document.createElement("div"),
			head_tool = document.createElement("div"),
			head_date_filter = document.createElement("el-date-picker"),
			head_date_divider = document.createElement("el-divider"),
			head_date_span = document.createElement("span"),
			
			body = document.createElement("div"),
			title_left = document.createElement("div"),
			title_left_table = document.createElement("table"),
			title_left_tr = document.createElement("tr"),
			title_left_td = document.createElement("td"),
			title_left_name = document.createElement("div"),
			title_left_filter = document.createElement("div"),
			title_left_input = document.createElement("input"),
			title_right = document.createElement("div"),
			title_right_item = document.createElement("div"),
			title_right_item_year = document.createElement("div"),
			title_right_item_dayDiv = document.createElement("div"),
			title_right_item_day = document.createElement("div"),
			
			body_left = document.createElement("div"),
			body_left_table = document.createElement("table"),
			body_left_tr = document.createElement("tr"),
			body_left_tr = document.createElement("td"),
			body_right = document.createElement("div"),
			body_right_date_item = document.createElement("div"),
			
			foot = document.createElement("div"),
			foot_slot = document.createElement("slot");
		
		//根容器
		root.className = "el-gantt";
		template.appendChild(root);
		//头部
		head.className = "el-gantt-head";
		head.innerHTML = "{{name}}";
		root.appendChild(head);
		//年视图和月视图切换以及时间查询
		head_tool.className = "el-gantt-tool";
		head.appendChild(head_tool);
		//时间查询控件
		head_tool.appendChild(head_date_filter.setAttribute("v-model", "filterTime").setAttribute("align", "right").setAttribute(":type", "swatchMode == 0 ? 'month' : 'date'").setAttribute("placeholder", "选择日期"));
		head_tool.appendChild(head_date_divider.setAttribute("direction", "vertical"));
		head_date_span.innerHTML = "{{swatchMode == 0 ? '今年' : '今天'}}";
		head_date_span.className = "el-gantt-mode";
		head_tool.appendChild(head_date_span.setAttribute("@click","getNowDate"));
		head_tool.appendChild(head_date_divider.cloneNode(true));
		var year_span = head_date_span.cloneNode(true).innerHTML = "年";
		head_tool.appendChild(year_span.setAttribute(":class", "swatchMode == 0 ? 'active' : ''").setAttribute("@click","swatchMode = 0"));
		head_tool.appendChild(head_date_divider.cloneNode(true));
		var month_span = head_date_span.cloneNode(true).innerHTML = "月";
		head_tool.appendChild(month_span.setAttribute(":class", "swatchMode == 1 ? 'active' : ''").setAttribute("@click","swatchMode = 1"));
		//标题栏
		body.className = "el-gantt-body";
		root.appendChild(body);
		//标题栏-左侧
		title_left.className = "el-gantt-left el-gantt-title";
		body.appendChild(title_left);
		//标题栏-左侧-表格
		title_left.appendChild(title_left_table);
		//标题栏-左侧-行
		title_left_table.appendChild(title_left_tr);
		//标题栏-左侧-列
		title_left_tr.appendChild(title_left_td.setAttribute("v-for", "(item,i) in columns").setAttribute(":key", "i").setAttribute(":width", "item.width + 'px'"));
		//标题栏-左侧-列-字段名称
		title_left_name.className = "el-gantt-name";
		title_left_name.innerHTML = "{{item.name}}";
		title_left_td.appendChild(title_left_name);
		//标题栏-左侧-列-模糊查询
		title_left_filter.className = "el-gantt-filter";
		title_left_td.appendChild(title_left_filter.setAttribute("v-if", "item.isSearch"));
		title_left_input.className = "el-gantt-name";
		title_left_filter.appendChild(title_left_input.setAttribute("v-model", "searchObj[item.columnName]").setAttribute("style", "width: 100%;"));
		//标题栏-右侧
		title_right.className = "el-gantt-right";
		body.appendChild(title_right);
		//标题栏-右侧-日期
		title_right_item.className = "el-gantt-date-item";
		title_right.appendChild(title_right_item.setAttribute("v-for", "item in dateArray").setAttribute(":key", "item.name").setAttribute(":class", "{'is-main': mode == 'main'}"));
		//标题栏-右侧-日期-年份
		title_right_item_year.className = "el-gantt-date-year";
		title_right_item_year.innerHTML = "{{item.name}}"
		title_right_item.appendChild(title_right_item_year);
		//标题栏-右侧-日期-日-容器
		title_right_item_dayDiv.className = "el-gantt-date-div-day";
		title_right_item.appendChild(title_right_item_dayDiv);
		//标题栏-右侧-日期-日
		title_right_item_day.className = "el-gantt-date-day";
		title_right_item_day.innerHTML = "{{citem}}";
		title_right_item_dayDiv.appendChild(title_right_item_day.setAttribute("v-for", "citem in item.children").setAttribute(":key", "item.name + '-' + citem"));
		//内容区域-左侧
		body_left.className = "el-gantt-left";
		body.appendChild(body_left);
		//内容区域-左侧-表格
		body_left.appendChild(body_left_table);
		//内容区域-左侧-行
		body_left_table.appendChild(body_left_tr.setAttribute("v-for", "item in sourceData"));
		//内容区域-左侧-列
		body_left_tr.appendChild(body_left_tr.setAttribute("v-for", "citem in columns"));
		//内容区域-右侧
		body_right.className = "el-gantt-right"; 
		body.appendChild(body_right);
		//内容区域-右侧-数据
		body_right_date_item.className = "el-gantt-date-item"; 
		body_right.appendChild(body_right_date_item.setAttribute("v-for", "item in sourceData"));
		
		body.className = "el-gantt-body";
		root.appendChild(body);
		body_left.className = "el-gantt-left";
		body.appendChild(body_left);、
		
		foot.className = "el-gantt-foot";
		root.appendChild(foot);
		foot_slot.setAttribute("name", "foot");
		foot.appendChild(foot_slot);
		
		return template.outerHTML;
	}
	
	var options = {
		name: "el-gantt",
		data: function(){
			var searchObj = {};
			for(var i = 0; i < this.columns.length; i++){
				var item = this.columns[i];
				if(item.isSearch) searchObj[item.columnName] = "";
			}
			return {
				searchObj: searchObj,//模糊查询
				filterTime: "",//时间查询
				swatchMode: 1,//0年模式 1月模式
				dateArray: [],//获取日历
				source: [],//处理后数据
			};
		},
		props: {
			name: String,
			columns: {
				type: Array,
				required: true
			},
			data: {
				type: Array,
				required: true,
				default:function(){
					return [];
				}
			},
			mode: {
				type: String,
				default: "main"
			},
			gridWidth: String,
			hasYear: Boolean,
			readonly: Boolean
		},
		watch:{
			filterTime: function(){
				this.getDateArray();
			},
			swatchMode: function(){
				this.getDateArray();
			},
		},
		computed:{
			sourceData: function(){
				var data = [];
				for(var i = 0; i < this.data.length; i++){
					var item = this.data[i],boo = true;
					for(var j = 0; j < this.columns.length; j++){
						var columnName = this.columns[j].columnName;
						if(typeof item[columnName] === "string" || (!this.searchObj[columnName] && item[columnName].indexOf(this.searchObj[columnName]) === -1)) {
							boo = false;
							break;
						}
					}
					if(boo) data.push(item);
				}
				return data;
			}
		},
		methods:{
			//今天或今年的快捷按钮
			getNowDate: function(){
				var date = new Date();
				this.filterTime = date.getYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
			},
			//获取右侧时间轴
			getDateArray: function(){
				var date = new Date(this.filterTime),
					year = date.getYear(),
					month = date.getMonth() + 1,
					day = date.getDay(),
					index = 0,
					dateArray = [];
				if(this.swatchMode === 1){//月视图
					dateArray.push({
						name: year + '年' + month + "月",
						children: [day]
					})
					for(var i = 0; i < 29; i++) {
						date = new Date(date.getTime() + 3600 * 1000 * 24);
						var name = date.getYear() + '年' + (date.getMonth() + 1) + "月";
						if(dateArray[index].name != name) {
							dateArray.push({
								name: name,
								children: []
							});
							index++;
						}
						dateArray[index].children.push(date.getDay());
					}
					
				} else if(this.swatchMode === 0) {//年视图
					dateArray.push({
						name: year + '年',
						children: []
					})
					for(var i = 0; i < 24; i++) {
						if(month > 12) {
							month = 1;
							year++;
							dateArray.push({
								name: year + '年',
								children: []
							});
							index++;
						}
						dateArray[index].children.push(month + "月");
					}
				}
				this.dateArray = dateArray;
			},
			//数据进行处理
			// formatData: function(data,colIndex,resultData){
			// 	var columnName = this.columns[colIndex].columnName,
			// 		result = [],
			// 		resultObj = {};
			// 	if(columnName){
			// 		for(var i = 0; i < data.length; i++){
			// 			var item = data[i];
			// 			if(item[columnName].indexOf())
			// 			if(!resultObj[item[columnName]]){
			// 				resultObj[item[columnName]] = {
			// 					name: item[columnName],
			// 					children: []
			// 				};
			// 			}
			// 			resultObj[item[columnName]].children.push(item);
			// 		}
			// 		for(var key in resultObj) {
			// 			var item = resultObj[key];
			// 			if(this.columns[colIndex + 1]) {
			// 				item.children = this.formatData(item.children, colIndex + 1,resultData);
			// 			}
			// 			result.push(item);
			// 		}
			// 	} else {
			// 		resultData = resultData.concat(data);
			// 	}
			// 	return result;
			// },
			// //是否重复列
			// isShowColumn: function(index,columnName){
			// 	var boo = true;
			// 	if(index > 0 && this.sourceData[index][columnName] == this.sourceData[index - 1][columnName]) {
			// 		boo = false;
			// 	}
			// 	return boo;
			// }
		},
		template: template(),
	}
	
	if(Vue) Vue.component("el-gantt",options);
})();